<template>
  <div class="q-pa-md">
    <button @click="isGrouping">isGrouping</button>
    <fieldset>
      <legend>quickGroupInfo</legend>
      {{ quickGroupInfo }}
    </fieldset>
    <t-data-grid ref="dataGrid1" :rows="rows" :optColumns="optColumns" :loading="loading" :rowKey="rowKey"
      :pageIndex="pagination.page" :pageSize="pagination.rowsPerPage" :rowsNumber="pagination.rowsNumber"
      @request="onRequest" :groupItemSummary="groupItemSummary" @groupSummary="onGroupSummary"
      :columnLinkFormat="columnLinkFormat">
    </t-data-grid>
  </div>
</template>

<script>
import options from './options';

import { onMounted, ref } from 'vue';
export default {
  setup() {
    const rows = ref([]);

    const pagination = ref({ page: 1, rowsPerPage: 3, rowsNumber: 2001, });

    const loading = ref(false);

    function onRequest(props) {
      const { page, rowsPerPage } = props.pagination;

      loading.value = true;

      setTimeout(() => {
        fetchFromServer(props.pagination);
      }, 1500);

    }

    function fetchFromServer(_pagination) {
      console.log("getFilters", Widget.dataGrid1.quickGroup.getFilters(), Widget.dataGrid1.quickGroup?.getGroupByFilter());

      quickGroupInfo.value = {
        getFilters: Widget.dataGrid1.quickGroup.getFilters(),
        getGroupByFilter: Widget.dataGrid1.quickGroup?.getGroupByFilter()
      }

      const { page, rowsPerPage, rowsNumber } = _pagination;
      const fetchCount = rowsPerPage === 0 ? rowsNumber : rowsPerPage;

      // calculate starting row of data
      const startRow = (page - 1) * rowsPerPage;

      fetch(
        `http://localhost:3004/users?_start=${startRow}&_limit=${fetchCount}`,
      ).then(response => {
        response.json().then(data => {
          rows.value.splice(0, rows.value.length, ...data);

          pagination.value.rowsNumber = 2001;
          pagination.value.page = page;
          pagination.value.rowsPerPage = rowsPerPage;

          loading.value = false;
        });
      });
    }
    let Widget = {};

    onMounted(() => {
      Widget.dataGrid1 = vm.dataGrid1.value;
      window.Widget = Widget;
      fetchFromServer(pagination.value, '');
    });


    function isGrouping(){
      vm.dataGrid1.value.isGrouping = !vm.dataGrid1.value.isGrouping;
    }

    const quickGroupInfo = ref({});
    function onGroupSummary(summary) {
      debugger;

      vm.dataGrid1.value.isGrouping = true;


      let { groupColumn } = summary;
      // groupItemSummary.value = [
      //   {
      //     "Total": 11,
      //     [groupColumn]: 0
      //   },
      //   {
      //     "Total": 30,
      //     [groupColumn]: 1
      //   },
      //   {
      //     "Total": 20,
      //     [groupColumn]: 2
      //   },
      //   {
      //     "Total": 1,
      //     [groupColumn]: 3
      //   },
      //   {
      //     "Total": 959,
      //     [groupColumn]: 4
      //   }
      // ]

      let items = [];


      if (['Code', 'Name'].includes(groupColumn)) {
        for (let i = 1; i <= 30 /*parseInt(Math.random(10, 40) * 40)*/; i++) {
          items.push(
            { [groupColumn]: i, Total: Math.random(10, 40) },
            // { label: `状态-${i + 1}`, value: `${i + 1}` },
            // { label: `状态-${i + 2}`, value: `${i + 2}` },
            // { label: `状态-${i + 3}`, value: `${i + 3}` },
            // { label: `状态-${i + 4}`, value: `${i + 4}` },
          );
        }
      } else {
        items.push(
          { [groupColumn]: 0, Total: Math.random(10, 40) },
          { [groupColumn]: 1, Total: Math.random(10, 40) },
          { [groupColumn]: 2, Total: Math.random(10, 40) },
          { [groupColumn]: 3, Total: Math.random(10, 40) },
          { [groupColumn]: 4, Total: Math.random(10, 40) },
          { [groupColumn]: 5, Total: Math.random(10, 40) },
          { [groupColumn]: 6, Total: Math.random(10, 40) },
          { [groupColumn]: 7, Total: Math.random(10, 40) },
        );
      }

      groupItemSummary.value = items;
    }


    let groupItemSummary = ref([]);

    let vm = {
      dataGrid1: ref(),

      rows,
      loading,
      columnLinkFormat: field => {
        console.log(field, Widget.dataGrid1.cellClickInfo.data[field]);
      },
      pagination: pagination,
      rowKey: options.idField,
      optColumns: options.columns,
      onRequest,

      isGrouping,
      onGroupSummary,
      groupItemSummary,
      quickGroupInfo
    };
    return vm;
  },
};
</script>
